.wraper-invite-list{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	&.isAndroid{
		.line{
			height: 135px;
		}
	}
	&.seeDetail{
		.search{
			background-color: #F2F4F7;
			height: 40px;
			line-height: 40px;
			border-radius: 6px;
			position: fixed;
			left: 0.3rem;
			right: 0.3rem;
			top: 90px;
			z-index: 10;
			background-repeat: no-repeat;
			background-position: 12px center;
			background-image: url('../../static/images/search.png');
			background-size: 16px 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 40px;
			input{
				height: 30px;
				line-height: 30px;
				flex-grow: 2;
				background:none;
			}
			span.close{
				width: 40px;
				height: 40px;
				background-image: url('../../static/images/close2.png');
				background-repeat: no-repeat;
				background-size: 18px 18px;
				background-position: center center;
			}
		}
		.content .list{
			padding-top: 170px;
			.ele{
				div{
					&:nth-child(4){
						width: 23%;
						box-sizing:border-box;
						padding-right: 0.3rem;
						background-image: url('../../static/images/arrow-right.png');
						background-position: center right;
						background-size: 0.22rem 0.22rem;
						background-repeat: no-repeat;
					}
					&.lock{
						background:none;
					}
				}
			}
		}
		.nav2{
			top: 130px;
			&.nav3{
				div{
					&:nth-child(4){
						width: 30%;
						float: right;
						// padding-right: 0.35rem;
					}
				}
			}
		}
		&.iphone{
			.search{
				top:110px;
			}
			.content .list{
				padding-top: 190px;
			}
			.nav2{
				top: 150px;
			}
			&.iphoneX{
				.search{
					top:130px;
				}
				.content .list{
					padding-top: 210px;
				}
				.nav2{
					top: 170px;
				}
			}
		}
	}
	&.iphone{
		.nav-bar{
			top: 20px;
		}
		.tab{
			top: 60px;
		}
		.nav2{
			top: 115px;
		}
		.content .list{
			padding-top: 155px;
		}
	}
	&.iphoneX{
		.nav-bar{
			top: 45px;
		}
		.tab{
			top: 80px;
		}
		.nav2{
			top: 135px;
		}
		.content .list{
			padding-top: 175px;
			padding-bottom: 40px;
		}
	}
	.line{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		height: 150px;
		background-color: #fff;
		z-index: 1;
	}
	.nav-bar{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		background-color: #fff;
		z-index: 3;
		height: 40px;
		line-height: 40px;
		margin-bottom: 0;
		.arrow{
			background-image: url('../../static/images/back-black.png');
		}
	}
	.nav2{
		position: fixed;
		left: 0;
		top: 90px;
		right: 0;
		height: 40px;
		line-height: 40px;
		color: #6D7E8F;
		font-size: 12px;
		padding: 0 0 0 1.5rem;
		z-index: 3;
		background-color: #fff;
		overflow: hidden;
		&:after{
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			border-bottom: 1px solid #D3DCE6;
			transform:scaleY(0.5);
		}
		.left{
			width: 1.2rem;
			position: absolute;
			left: 0.3rem;
			top: 0;
			bottom: 0;
		}
		.right{
			width: 100%;
			overflow: hidden;
			position: relative;
			height: 40px;
			.scroll{
				height: 40px;
				padding-right: 0.3rem;
				position: absolute;
				left: 0;
				top: 0;
				&.zh{
					width: 9rem;
				}
				&.en{
					width: 14rem;
				}
				&.ja{
					width: 12rem;
				}
				div{
					float: left;
					text-align: left;
					width: 18%;
					overflow: hidden;
					&:first-child{
						// text-align: left;
						// width: 22%;
					}
					&:nth-child(2){
						// width: 24%;
					}
					&:nth-child(3){
						// width: 24%;
					}
					&:last-child{
						text-align: right;
						// width: 28%;
					}
				}
			}
		}
		&.nav3{
			padding: 0 0.3rem;
			div{
				float: left;
				width: 50%;
				&:nth-child(2){
					width: 1.8rem;
				}
				&:nth-child(3){
					text-align: left;
				}
			}
		}
	}
	.tab{
		background-color: #fff;
		height: 25px;
		overflow: hidden;
		padding: 15px;
		position: fixed;
		left: 0;
		top: 40px;
		right: 0;
		z-index: 3;
		span{
			font-size: 0.32rem;
			color: #9AA9B8;
			padding-right: 12px;
			font-weight: normal;
			transition: all 0.1s linear;
			&.on{
				color: #2E3D4D;
				font-size: 0.43rem;
				font-weight: 600;
			}
		}
	}
	.content{
		z-index: 3;
		.list{
			padding-top: 130px;
			.content2{
				overflow: hidden;
				padding-left: 1.5rem;
				.slide-left{
					width: 1.2rem;
					float: left;
					margin-left: -1.2rem;
					.left{
						float: none;
						height: 0.88rem;
						line-height: 0.88rem;
						position: relative;
						&:after{
							content:'';
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							height: 1px;
							border-bottom: 1px solid #D3DCE6;
							transform: scaleY(0.5);
							transform-origin: 0 0;
						}
					}
				}
				.slide-right{
					width: 100%;
					overflow-x: scroll;
					overflow-y: hidden;
					.scroll{
						padding-right: 0.3rem;
						&.zh{
							width: 9rem;
						}
						&.en{
							width: 14rem;
						}
						&.ja{
							width: 12rem;
						}
					}
				}
			}
			.van-cell{
				margin: 0 0 0 0.3rem;
				padding: 0;
				border: 0;
				border: 0;
			}
			.item,.ele{
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.25rem;
				position: relative;
				margin-left: 0.3rem;
				padding: 0 0.3rem 0 2.5rem;
				.on{
					color: #427DB8;
					font-weight: 600;
				}
				&:after{
					content:'';
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					height: 1px;
					border-bottom: 1px solid #D3DCE6;
					transform: scaleY(0.5);
					transform-origin: 0 0;
				}
			}
			.item{
				.left{
					width: 2.5rem;
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					color: #427DB8;
					font-weight: 500;
					line-height: 1.2;
					word-break: break-all;
					display: flex;
					align-items: center;
				}
				.right{
					color: #2E3D4D;
					width: 100%;
					font-weight: 400;
					div{
						float: left;
						width: 18%;
						text-align: left;
						overflow: hidden;
						&:first-child{
							// text-align: left;
							// width: 22%;
						}
						&:nth-child(2){
							// text-align: right;
							// width: 24%;
						}
						&:nth-child(3){
							// width: 24%;
						}
						&:last-child{
							text-align: right;
							// width: 28%;
						}
					}
				}
			}
			.ele{
				padding: 0 0.3rem 0 0;
				color: #2E3D4D;
				font-size: 0.25rem;
				display: flex;
				justify-content: space-around;
				div{
					width: 50%;
					float: left;
					height: 100%;
					img{
						width: 0.44rem;
						height: 0.44rem;
						margin-right: 0.08rem;
					}
					&:nth-child(2){
						width: 1.8rem;
						line-height: 1.2;
						word-break: break-all;
						display: flex;
						align-items: center;
					}
					&:nth-child(3){
						width: 30%;
						text-align: left;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						span{
							width: 22px;;
							height: 22px;
							line-height: 22px;
							text-align: center;
							border-radius: 3px;
							color: #fff;
							font-weight: 400;
							font-size: 12px;
							margin-right: 3px;
							&.chong{
								background-color: #16B89D;
							}
							&.he{
								background-color: #6783e0;
							}
							&.cai{
								background-color: #EB9C67;
							}
							&.wu{
								background-color: #fff;
								color: #2E3D4D;
							}
							&.cha{
								background-color: #6797E0;
							}
							&.bi{
								background-color: #F1BA39;
							}
							&.xian{
								background-color: #2AC0D1;
							}
						}
						&.en{
							span{
								font-size: 0.2rem;
							}
						}
					}
					&:nth-child(4){
						width: auto;
						text-align: right;
						overflow: hidden;
						float: right;
					}
				}
			}
		}
	}
}

.empty{
	text-align: center;
	color: #9AA9B8;
	padding: 1.3rem 0 0 0;
	font-size: 0.3rem;
}
.empty img{
	width: 2.5rem;
	margin-bottom: 0.22rem;
}









